<!-- 模板部分 -->
<template>
	<!-- 遍历comments数组，创建一个代表每条评论的视图元素 -->
	<view v-for="(comment, index) in comments" :key="index" class="comment-item">
		<!-- 用户信息部分 -->
		<view class="comment-user">
			<!-- 显示用户的头像 -->
			<image :src="comment.userPhoto" class="comment-avatar" alt="Avatar" />
			<!-- 显示用户名 -->
			<view class="comment-username">{{ comment.userName }}</view>
			<!-- 显示评论的时间戳 -->
			<view class="comment-time">{{ comment.createdAt }}</view>
		</view>
		<!-- 显示评论内容 -->
		<view class="comment-content">{{ comment.content }}</view>
		<!-- 评论的操作按钮 -->
		<view class="comment-actions">
			<!-- 点赞功能 -->
			<view class="comment-action" @click="toggleLike(comment)">
				<!-- 根据是否已点赞显示不同的图标 -->
				<image :src="comment.isLiked ? likedIconSrc : likeIconSrc" mode="aspectFit" />
				<!-- 显示点赞数 -->
				<text>{{ comment.data.likes > 99 ? '99+' : comment.data.likes }}</text>
			</view>
			<!-- 查看回复的功能 -->
			<view class="comment-action" @click="toggleReplies(comment)">
				<text>{{ comment.replies ? comment.replies.length : 0 }}条回复</text>
			</view>
		</view>
		<!-- 如果显示回复，则渲染回复树 -->
		<view v-if="comment.showReplies" class="replies">
			<comment-tree :comments="comment.replies" :like-icon-src="likeIconSrc" :liked-icon-src="likedIconSrc"
				@add-reply="addReply" @toggle-like="toggleLike"></comment-tree>
		</view>
		<!-- 回复表单 -->
		<view class="reply-form" v-if="comment.showReplies">
			<input type="text" v-model="comment.replyText" placeholder="回复他" />
			<button @click="addReply(comment)">发送</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	// 接受父组件传递过来的comments数组、点赞图标路径、已点赞图标路径
	const props = defineProps({
		comments: {
			type: Array,
			required: true
		},
		likeIconSrc: {
			type: String,
			required: true
		},
		likedIconSrc: {
			type: String,
			required: true
		}
	});

	// 定义用于向父组件发送事件的方法
	const emit = defineEmits(['add-reply', 'toggle-like']);

	// 初始化comments数组
	const comments = ref(initializeComments(props.comments));

	function initializeComments(comments) {
		// 对每条评论添加额外的字段：是否已点赞、是否可删除、回复文本、是否显示回复
		return comments.map(comment => ({
			...comment,
			isLiked: false,
			userPhoto: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.y6rdSCGpxbfeb8Rd1CpSuwAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7',
			replyText: '',
			showReplies: false
		}));
	}

	// 点赞功能
	function toggleLike(comment) {
		emit('toggle-like', comment);
	}

	// 添加回复
	function addReply(comment) {
		if (comment.replyText.trim() !== '') {
			emit('add-reply', comment, comment.replyText);
			comment.replyText = '';
		}
	}

	// 切换回复显示状态
	function toggleReplies(comment) {
		comment.showReplies = !comment.showReplies;
	}

	// 当父组件传递过来的comments发生变化时重新初始化
	watch(() => props.comments, newVal => {
		comments.value = initializeComments(newVal);
	}, {
		deep: true
	});
</script>

<style scoped>
	.comment-section {
		padding: 10px;
		background-color: #f5f5f5;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.comment-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #ebebeb;
	}

	.comment-count {
		cursor: pointer;
		font-size: 16px;
	}

	.comments-list {
		margin-top: 10px;
	}

	.comment-item {
		border-bottom: 1px solid #ccc;
		padding: 10px 0;
		margin-bottom: 10px;
		background-color: #fff;
	}

	.comment-user {
		display: flex;
		align-items: center;
	}

	.comment-username {
		font-weight: bold;
		font-size: 16px;
	}

	.comment-time {
		color: #666;
		margin-left: 5px;
		font-size: 14px;
	}

	.comment-content {
		margin-top: 5px;
		font-size: 16px;
	}

	.comment-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.comment-action {
		display: flex;
		align-items: center;
	}

	.comment-action image {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.reply-form,
	.add-comment {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	.reply-form input,
	.add-comment input {
		flex-grow: 1;
		margin-right: 5px;
		font-size: 16px;
	}

	.replies {
		margin-top: 5px;
	}

	.reply-item {
		display: flex;
		align-items: baseline;
		margin-left: 10px;
	}

	.reply-username {
		font-weight: bold;
		color: #333;
		font-size: 16px;
	}

	.reply-content {
		margin-left: 5px;
		font-size: 16px;
	}

	.slide-fade-enter-active,
	.slide-fade-leave-active {
		transition: all 0.3s ease;
	}

	.slide-fade-enter-from,
	.slide-fade-leave-to {
		transform: translateX(10px);
		opacity: 0;
	}

	/* 添加按钮样式的覆盖 */
	.like-button .uni-icons,
	.collect-button .uni-icons {
		--uni-text-color: transparent;
		/* 修改图标颜色为透明 */
		--uni-text-hover-color: currentcolor;
		/* 点击时的颜色设置为当前颜色 */
		--uni-text-selected-color: currentcolor;
		/* 选中时的颜色设置为当前颜色 */
	}

	.comment-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
	}
</style>